import {CCard} from '@/components/card'
import {CnMediumSpan, CnNormalSpan} from '@/components/text'
import {CFormModal, ChangeVisible} from '@/components/modal'
import {editDevNameApi} from '@/api/public'
import {getUserId} from '@/libs/auth'

/* 处理字段为空的函数 */
const fieldIsNull = (str: string) => {
  return str == null || str == '' ? '--' : str
}

const SettingItem = defineComponent({
  props: {
    label: String,
    desc: String,
    canEdit: Boolean,
    isEdit: Boolean,
    devId: Number || null || undefined
  },
  emits: ['onClick'],
  setup(props, emits) {
    // 是否是修改状态的标识
    const isEdit = ref(false)
    // 修改设备名称的编辑点击事件
    const editDevNameClick = () => {
      if (editValue.value == '') {
        editValue.value = props.desc
      }
      console.log('编辑')
      isEdit.value = true
    }

    // 修改设备名称的保存点击事件
    const editDevNameSaveClick = async () => {
      await editDevNameApi({
        devId: props.devId,
        userId: getUserId(),
        newDevName: editValue.value
      })
      console.log('保存')
      isEdit.value = false
    }

    // 修改的值
    const editValue = ref('')
    onMounted(() => {
      // editValue.value = props.desc
    })

    // const editInputChange = (e: any) => {
    //   console.log(e)
    //   props.desc = e
    // }

    const nameValueFunc = () => {
      // let str = ''
      return editValue.value == '' ? props.desc : editValue.value
    }

    return () => (
      <div class='h-64 grid grid-cols-24 px-32 leading-64'>
        <CnMediumSpan class='text-16 mr-42 col-span-3'>{props.label || 'label'}</CnMediumSpan>
        <div class='col-span-20 overflow-hidden'>
          {props.canEdit ? (
            <div>
              {isEdit.value ? (
                <a-input
                  class='w-300'
                  v-model:value={editValue.value}
                  placeholder='请输入设备名称'
                ></a-input>
              ) : (
                <CnNormalSpan class='text-16 cursor-pointer'>{nameValueFunc()}</CnNormalSpan>
              )}
            </div>
          ) : (
            <CnNormalSpan class='text-16 cursor-pointer'>{props.desc}</CnNormalSpan>
          )}
        </div>
        {props.canEdit ? (
          <div>
            {!isEdit.value ? (
              <CnNormalSpan
                class='text-primary flex items-center cursor-pointer col-span-1'
                onClick={() => {
                  editDevNameClick()
                }}
              >
                编辑
              </CnNormalSpan>
            ) : (
              <CnNormalSpan
                class='text-success flex items-center cursor-pointer col-span-1'
                onClick={() => {
                  editDevNameSaveClick()
                }}
              >
                保存
              </CnNormalSpan>
            )}
          </div>
        ) : (
          //   {
          //     props.isEdit ? (
          //       <div>111</div>
          //    ):
          //  }
          <div></div>
        )}
        {/* <CFormModal class='w-388 h-300' v-model={[isEdit.value, 'visible']}>
          {<div>1111</div>}
        </CFormModal> */}
      </div>
    )
  }
})

const editName = () => {
  console.log(111)
}

export const DevNameItem = defineComponent({
  props: {
    devInfo: {}
  },
  emits: ['editDevNameClick'],
  setup(props, emits) {
    return () => (
      <CCard showTitle={false} title={'设备信息-设备名称'} class='bg-white py-0 px-16'>
        <SettingItem
          class='border-b border-splitLine'
          label='设备名称'
          desc={fieldIsNull(props.devInfo.devName.toString())}
          canEdit={true}
          isEdit={false}
          devId={props.devInfo.devId}
          onClick={() => {
            editName()
          }}
        ></SettingItem>
        <SettingItem
          class='border-b border-splitLine'
          label='设备型号'
          desc={fieldIsNull(props.devInfo.devTypeName.toString())}
        ></SettingItem>

        <SettingItem
          class='border-b border-splitLine'
          label='设备编号'
          desc={fieldIsNull(props.devInfo.devGId.toString())}
        ></SettingItem>

        <SettingItem
          label='设备码'
          desc={fieldIsNull(props.devInfo.devYard.toString())}
        ></SettingItem>
      </CCard>
    )
  }
})

export const DevRuntimeItem = defineComponent({
  props: {
    devInfo: {}
  },

  setup(props, {slots}) {
    return () => (
      <CCard showTitle={false} title={'设备信息-创建时间'} class='bg-white  py-0 px-16'>
        <div></div>
        <SettingItem
          class='border-b border-splitLine'
          label='创建时间'
          desc={fieldIsNull(props.devInfo.CreateTime)}
        ></SettingItem>

        <SettingItem label='运行时间' desc={fieldIsNull(props.devInfo.runningTime)}></SettingItem>
      </CCard>
    )
  }
})

export const DevSystemMsgItem = defineComponent({
  props: {
    devInfo: {}
  },
  setup(props, {slots}) {
    return () => (
      <CCard showTitle={false} title={'设备信息-创建时间'} class='bg-white  py-0 px-16'>
        <SettingItem
          class='border-b border-splitLine'
          label='系统信息'
          desc={fieldIsNull(props.devInfo.systemInfo)}
        ></SettingItem>
        <SettingItem
          class='border-b border-splitLine'
          label='省市区'
          desc={
            fieldIsNull(props.devInfo.province) +
            ' - ' +
            fieldIsNull(props.devInfo.city) +
            ' - ' +
            fieldIsNull(props.devInfo.district)
          }
        ></SettingItem>
        <SettingItem
          class='border-b border-splitLine'
          label='详细地址'
          desc={fieldIsNull(props.devInfo.devAddress)}
        ></SettingItem>
        <SettingItem
          class='border-b border-splitLine'
          label='经纬度'
          desc={
            '经度：' +
            fieldIsNull(props.devInfo.longitude) +
            '\xa0\xa0\xa0纬度：' +
            fieldIsNull(props.devInfo.dimensionality)
          }
        ></SettingItem>
      </CCard>
    )
  }
})
